<template>
  <div class="run-container">
    <div class="run-core">
      <el-card class="run-card">

        <el-descriptions class="margin-top description" :title="person.name"  :column="2" :size="'medium'" :colon="true" :border="false">

          <el-descriptions-item label="头像">
            <el-avatar :src="person.avatar" ></el-avatar>
          </el-descriptions-item>

          <el-descriptions-item label="姓名">
            <span class="desc-text"> {{ person.name }} </span>
          </el-descriptions-item>

          <el-descriptions-item label="性别">
            <span class="desc-text"> {{person.sex === 0?'男':'女'}} </span>
          </el-descriptions-item>

          <el-descriptions-item label="年龄">
            <span class="desc-text"> {{ person.age }} </span>
          </el-descriptions-item>

          <el-descriptions-item label="手机号">
            <span class="desc-text"> {{ person.phone }} </span>
          </el-descriptions-item>

          <el-descriptions-item label="当前住址">
            <span class="desc-text"> {{ person.address }} </span>
          </el-descriptions-item>

          <el-descriptions-item label="籍贯">
            <span class="desc-text"> {{ person.nativePlace }} </span>
          </el-descriptions-item>

          <el-descriptions-item label="邮箱">
            <span class="desc-text"> {{ person.email }} </span>
          </el-descriptions-item>

          <el-descriptions-item label="政治面貌">
            <span class="desc-text"> {{ person.politicCountenanceStr }} </span>
          </el-descriptions-item>

          <el-descriptions-item label="学历">
            <span class="desc-text"> {{ person.educationStr }} </span>
          </el-descriptions-item>

          <el-descriptions-item label="毕业学校">
            <span class="desc-text"> {{ person.graduationSchool }} </span>
          </el-descriptions-item>

          <el-descriptions-item label="期望岗位">
            <span class="desc-text"> {{ person.expectedPosition }} </span>
          </el-descriptions-item>

          <el-descriptions-item label="期望薪资">
            <span class="desc-text"> {{ person.expectedSalary }} </span>
          </el-descriptions-item>

          <el-descriptions-item label="工作经历" v-for="item in person.works">
            <span class="desc-text"> 原公司 {{ item.companyName }} </span>
            <span class="desc-text"> 原岗位 {{ item.position }}</span>
            <span class="desc-text"> 工作时长 {{ item.workTime }} </span>
            <span class="desc-text"> 周期范围 {{ item.dateTime }} </span>
            <span class="desc-text"> 薪资 {{ item.salary }} </span>
          </el-descriptions-item>

        </el-descriptions>

          <el-form ref="form" :model="emp" :inline="true" label-width="100px" style="margin-top:2rem;width:100%">

              <el-form-item label="入职时间">
                <el-date-picker
                  v-model="emp.entryTime"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>

            <el-form-item label="就职状态">
              <el-radio v-model="emp.typeId" :label="obj.id" v-for="obj in radioType">{{obj.type}}</el-radio>
            </el-form-item>


            <el-form-item label="分配岗位">
              <el-cascader
                placeholder="请选择组织"
                v-model="emp.orgId"
                :options="options"
                @change="refresh">
              </el-cascader>
            </el-form-item>



            <template>
              <el-upload
                class="upload-demo"
                :action="baseURL+'/fileController/upload'"
                :on-success="successUpload"
                multiple
                :limit="10">
                <el-button style="margin-left:2rem" size="small" type="primary">点击上传</el-button>
              </el-upload>
            </template>

            <el-table :data="fileList" style="width: 100%">
              <el-table-column prop="code" label="编号" min-width="15%" align="center"></el-table-column>
              <el-table-column prop="title" label="说明名称" min-width="15%" align="center"></el-table-column>
              <el-table-column prop="fileName" label="文件名" min-width="15%" align="center"></el-table-column>
              <el-table-column prop="size" label="文件大小" min-width="15%" align="center"></el-table-column>
              <el-table-column label="文件地址" min-width="40%" align="center">
              <template slot-scope="scope">
                <el-link :href="scope.row.url" >{{scope.row.url}}</el-link>
              </template>
              </el-table-column>
            </el-table>

            <el-form-item label="备注" style="margin-top:2rem">
              <el-input
                style="height:10rem;width:100%"
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="emp.remarks">
              </el-input>
            </el-form-item>

            <el-form-item  style="margin:5rem">
              <el-button type="primary" @click="save">入职通过</el-button>
            </el-form-item>

          </el-form>
      </el-card>

      <el-dialog title="文件数据" :visible.sync="flag" width="500px">
        <el-form :model="file" :inline="true">
          <el-form-item label="说明名称">
           <el-input v-model="file.title" style="width:150px"></el-input>
          </el-form-item>

          <el-form-item label="文件大小">
            <el-input v-model="file.size" disabled style="width:150px"></el-input>
          </el-form-item>

          <el-form-item label="文件名称">
            <el-input v-model="file.fileName" disabled style="width:380px"></el-input>
          </el-form-item>

          <el-form-item label="文件地址">
            <el-input v-model="file.url" disabled style="width:380px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="flag = false">取 消</el-button>
          <el-button type="primary" @click="saveFile">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>

</template>

<script>
import {selectPersonInfoById} from "@/api/personnel";
import {getTypeList, handleInduction} from "@/api/employees";
import {orgChart} from "@/api/organization";
import request from "@/utils/request"

export default {
  data(){
    return{
      id:'',
      baseURL:'',
      emp:{},
      person:{},
      file:{},
      flag:false,
      radioType:[],
      options:[],
      fileList:[],
      tableData: []
    }
  },


  methods:{
    guid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        let r = Math.random()*16|0, v = c ==='x' ? r : (r&0x3|0x8);
        return v.toString(16);
      });
    },
    async save(){
      this.emp.infoId = this.id
      this.emp.deptId = this.emp.orgId[0]
      this.emp.positionId = this.emp.orgId[1]
      this.emp.fileList = this.fileList
      const res = await handleInduction(this.emp)
      if (res.code === 200){
        this.$message({message:res.message, type: 'success'});
        this.$router.push({path:'/employees/list'})
      }else {
        this.$message.error(res.message);
      }
    },
    saveEmp(){

    },
    async selectOrg(){
      const {data:res} =await orgChart()
      this.options = res.org.children
    },
    async getByIdInfo(){
      const {data:res} = await selectPersonInfoById(this.id)
      this.person = res.data
    },
    async typeVos(){
      const {data:res} = await getTypeList()
      this.radioType = res.data
    },
    refresh(){
      this.$forceUpdate()
    },
    successUpload(response, file, fileList){
      this.flag = true
      this.file = response.data.data
      this.file.code = this.guid()
      this.file.size = (this.file.size/8/1024).toFixed(2)+'KB'
    },
    saveFile(){
      this.fileList.push(this.file)
      this.flag = false
    }
  },
  created() {
    this.id = this.$route.params.id
    this.getByIdInfo()
    this.typeVos()
    this.selectOrg()
    this.baseURL = request.defaults.baseURL
  },
}
</script>

<style scoped lang="scss">
.run{
  &-container{
    position: relative;
    width: 100%;
  }
  &-core{
    margin:3rem 15rem 0 15rem
  }
}
</style>
